<template>
  <div>
    <div class="head">
      <div class="head_box">
        <el-button icon="el-icon-s-fold" @click="changeIsCollapse" size="mini"> </el-button>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="item in tabsList" :key="item.path" :to="{path: item.path}">{{item.label}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="info"> 用户信息</el-dropdown-item>
          <el-dropdown-item command="modify">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "CommonHeader",
  methods: {
    changeIsCollapse() {
      this.$store.commit("changeIsCollapse")
    },
    handleCommand(command) {
      if(command === "logout") {
        this.$store.dispatch("logout")
        this.$router.push({name: 'login'})
      }else if(command === "info") {
        this.$router.push({name: 'person'})
      }else if(command === "modify") {
        this.$router.push({name: 'modify'})
      }
    }
  },
  computed: {
    ...mapState({
      tabsList: state => state.tab.tabsList
    })
  }
}
</script>

<style>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding-top: 16px;
}
.head_box {
  display: flex;
  align-items: center;
  justify-content: inherit;
}
.el-breadcrumb {
  margin-left: 20px;
}
</style>
